<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .registration-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            animation: slideUp 0.6s ease-out;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .form-header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .form-header p {
            color: #666;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-row {
            display: flex;
            gap: 15px;
        }

        .form-row .form-group {
            flex: 1;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .checkbox-group input[type="checkbox"] {
            width: auto;
            margin-right: 10px;
            transform: scale(1.2);
        }

        .checkbox-group label {
            margin-bottom: 0;
            font-size: 13px;
            color: #666;
        }

        .checkbox-group a {
            color: #667eea;
            text-decoration: none;
        }

        .checkbox-group a:hover {
            text-decoration: underline;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .login-link {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }

        .login-link a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        .required {
            color: #e74c3c;
        }

        .form-group.error input {
            border-color: #e74c3c;
            background-color: #fdf2f2;
        }

        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .success-message {
            background-color: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #c3e6cb;
            display: none;
        }
    </style>
</head>
<body>
    <div class="registration-container">
        <div class="form-header">
            <h1>创建新账户</h1>
            <p>请填写以下信息完成注册</p>
        </div>

        <div class="success-message" id="successMessage">
            注册成功！欢迎加入我们！
        </div>

        <form id="registrationForm" novalidate>
            <!-- 基本信息 -->
            <div class="form-row">
                <div class="form-group">
                    <label for="firstName">姓 <span class="required">*</span></label>
                    <input type="text" id="firstName" name="firstName" required>
                    <div class="error-message">请输入您的姓</div>
                </div>
                <div class="form-group">
                    <label for="lastName">名 <span class="required">*</span></label>
                    <input type="text" id="lastName" name="lastName" required>
                    <div class="error-message">请输入您的名</div>
                </div>
            </div>

            <!-- 联系信息 -->
            <div class="form-group">
                <label for="email">邮箱地址 <span class="required">*</span></label>
                <input type="email" id="email" name="email" required>
                <div class="error-message">请输入有效的邮箱地址</div>
            </div>

            <div class="form-group">
                <label for="phone">手机号码 <span class="required">*</span></label>
                <input type="tel" id="phone" name="phone" required pattern="[0-9]{11}">
                <div class="error-message">请输入有效的11位手机号码</div>
            </div>

            <!-- 账户信息 -->
            <div class="form-group">
                <label for="username">用户名 <span class="required">*</span></label>
                <input type="text" id="username" name="username" required minlength="3" maxlength="20">
                <div class="error-message">用户名长度应为3-20个字符</div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="password">密码 <span class="required">*</span></label>
                    <input type="password" id="password" name="password" required minlength="6">
                    <div class="error-message">密码至少需要6个字符</div>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码 <span class="required">*</span></label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                    <div class="error-message">两次输入的密码不一致</div>
                </div>
            </div>

            <!-- 个人信息 -->
            <div class="form-row">
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender" name="gender">
                        <option value="">请选择</option>
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="birthDate">出生日期</label>
                    <input type="date" id="birthDate" name="birthDate">
                </div>
            </div>

            <div class="form-group">
                <label for="city">所在城市</label>
                <select id="city" name="city">
                    <option value="">请选择城市</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                    <option value="hangzhou">杭州</option>
                    <option value="nanjing">南京</option>
                    <option value="chengdu">成都</option>
                    <option value="wuhan">武汉</option>
                    <option value="xian">西安</option>
                    <option value="other">其他</option>
                </select>
            </div>

            <div class="form-group">
                <label for="company">公司/组织</label>
                <input type="text" id="company" name="company" placeholder="可选填写">
            </div>

            <div class="form-group">
                <label for="bio">个人简介</label>
                <textarea id="bio" name="bio" rows="3" placeholder="简单介绍一下自己..."></textarea>
            </div>

            <!-- 兴趣爱好 -->
            <div class="form-group">
                <label>兴趣爱好 (可多选)</label>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;">
                    <label style="display: flex; align-items: center; margin-bottom: 0; font-weight: normal;">
                        <input type="checkbox" name="interests" value="technology" style="margin-right: 5px;">
                        科技
                    </label>
                    <label style="display: flex; align-items: center; margin-bottom: 0; font-weight: normal;">
                        <input type="checkbox" name="interests" value="sports" style="margin-right: 5px;">
                        运动
                    </label>
                    <label style="display: flex; align-items: center; margin-bottom: 0; font-weight: normal;">
                        <input type="checkbox" name="interests" value="music" style="margin-right: 5px;">
                        音乐
                    </label>
                    <label style="display: flex; align-items: center; margin-bottom: 0; font-weight: normal;">
                        <input type="checkbox" name="interests" value="reading" style="margin-right: 5px;">
                        阅读
                    </label>
                    <label style="display: flex; align-items: center; margin-bottom: 0; font-weight: normal;">
                        <input type="checkbox" name="interests" value="travel" style="margin-right: 5px;">
                        旅行
                    </label>
                    <label style="display: flex; align-items: center; margin-bottom: 0; font-weight: normal;">
                        <input type="checkbox" name="interests" value="cooking" style="margin-right: 5px;">
                        烹饪
                    </label>
                </div>
            </div>

            <!-- 营销偏好 -->
            <div class="checkbox-group">
                <input type="checkbox" id="newsletter" name="newsletter" value="yes">
                <label for="newsletter">我希望接收产品更新和营销邮件</label>
            </div>

            <!-- 服务条款 -->
            <div class="checkbox-group">
                <input type="checkbox" id="terms" name="terms" required>
                <label for="terms">
                    我已阅读并同意 <a href="#" target="_blank">服务条款</a> 和 <a href="#" target="_blank">隐私政策</a> <span class="required">*</span>
                </label>
                <div class="error-message" style="margin-left: 30px;">请同意服务条款和隐私政策</div>
            </div>

            <button type="submit" class="submit-btn" id="submitBtn">
                创建账户
            </button>
        </form>

        <div class="login-link">
            已有账户？ <a href="#" id="loginLink">立即登录</a>
        </div>
    </div>

    <script>
        // 表单验证和提交处理
        document.getElementById('registrationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const form = this;
            const submitBtn = document.getElementById('submitBtn');
            const successMessage = document.getElementById('successMessage');
            
            // 清除之前的错误状态
            clearErrors();
            
            // 验证表单
            if (validateForm()) {
                // 模拟提交过程
                submitBtn.textContent = '注册中...';
                submitBtn.disabled = true;
                
                setTimeout(() => {
                    // 显示成功消息
                    successMessage.style.display = 'block';
                    successMessage.scrollIntoView({ behavior: 'smooth' });
                    
                    // 重置表单
                    form.reset();
                    
                    // 恢复按钮状态
                    submitBtn.textContent = '创建账户';
                    submitBtn.disabled = false;
                    
                    // 3秒后隐藏成功消息
                    setTimeout(() => {
                        successMessage.style.display = 'none';
                    }, 3000);
                }, 2000);
            }
        });

        function validateForm() {
            let isValid = true;
            
            // 验证必填字段
            const requiredFields = ['firstName', 'lastName', 'email', 'phone', 'username', 'password', 'confirmPassword'];
            
            requiredFields.forEach(fieldName => {
                const field = document.getElementById(fieldName);
                if (!field.value.trim()) {
                    showError(field, '此字段为必填项');
                    isValid = false;
                }
            });
            
            // 验证邮箱格式
            const email = document.getElementById('email');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email.value && !emailRegex.test(email.value)) {
                showError(email, '请输入有效的邮箱地址');
                isValid = false;
            }
            
            // 验证手机号格式
            const phone = document.getElementById('phone');
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (phone.value && !phoneRegex.test(phone.value)) {
                showError(phone, '请输入有效的11位手机号码');
                isValid = false;
            }
            
            // 验证密码长度
            const password = document.getElementById('password');
            if (password.value && password.value.length < 6) {
                showError(password, '密码至少需要6个字符');
                isValid = false;
            }
            
            // 验证密码确认
            const confirmPassword = document.getElementById('confirmPassword');
            if (password.value !== confirmPassword.value) {
                showError(confirmPassword, '两次输入的密码不一致');
                isValid = false;
            }
            
            // 验证用户名长度
            const username = document.getElementById('username');
            if (username.value && (username.value.length < 3 || username.value.length > 20)) {
                showError(username, '用户名长度应为3-20个字符');
                isValid = false;
            }
            
            // 验证服务条款
            const terms = document.getElementById('terms');
            if (!terms.checked) {
                showError(terms, '请同意服务条款和隐私政策');
                isValid = false;
            }
            
            return isValid;
        }

        function showError(field, message) {
            const formGroup = field.closest('.form-group') || field.closest('.checkbox-group');
            formGroup.classList.add('error');
            
            const errorElement = formGroup.querySelector('.error-message');
            if (errorElement) {
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }
        }

        function clearErrors() {
            const errorGroups = document.querySelectorAll('.form-group.error, .checkbox-group.error');
            errorGroups.forEach(group => {
                group.classList.remove('error');
                const errorMessage = group.querySelector('.error-message');
                if (errorMessage) {
                    errorMessage.style.display = 'none';
                }
            });
        }

        // 实时验证
        document.getElementById('confirmPassword').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmPassword = this.value;
            
            if (confirmPassword && password !== confirmPassword) {
                showError(this, '两次输入的密码不一致');
            } else {
                const formGroup = this.closest('.form-group');
                formGroup.classList.remove('error');
                const errorMessage = formGroup.querySelector('.error-message');
                if (errorMessage) {
                    errorMessage.style.display = 'none';
                }
            }
        });

        // 登录链接点击处理
        document.getElementById('loginLink').addEventListener('click', function(e) {
            e.preventDefault();
            alert('这里应该跳转到登录页面');
        });

        // 添加一些交互效果
        document.querySelectorAll('input, select, textarea').forEach(element => {
            element.addEventListener('focus', function() {
                this.parentElement.style.transform = 'scale(1.02)';
            });
            
            element.addEventListener('blur', function() {
                this.parentElement.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>
